<template>
    <div class="user-info">
        <el-card shadow="never" class="!border-none">
            <el-descriptions title="账号安全" :column="1" size="large" border>
                <el-descriptions-item label-class-name="user-label">
                    <template #label>
                        <div class="cell-item">密码</div>
                    </template>
                    <div class="edit-btn" @click="passwordVisible = true">
                        重置密码
                        <el-icon class="align-middle"><el-icon-edit /></el-icon>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="user-label">
                    <template #label>
                        <div class="cell-item">手机号</div>
                    </template>
                    <div class="edit-btn" @click="mobileVisible = true">
                        {{ userInfo.mobile ? "更换手机号" : "修改手机号" }}
                        <el-icon class="align-middle"><el-icon-edit /></el-icon>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-dialog v-model="passwordVisible" title="重置密码" width="500">
            <el-form ref="formPasswordRef" :rules="formPasswordRules" :model="userInfo">
                <el-form-item label="原密码：" prop="password" label-width="120px">
                    <el-input v-model="userInfo.password" clearable show-password placeholder="请输入原密码" />
                </el-form-item>
                <el-form-item label="新密码：" prop="new_password" label-width="120px">
                    <el-input v-model="userInfo.new_password" clearable show-password
                        placeholder="长度应为6-16，包含字母、数字、特殊符号" />
                </el-form-item>
                <el-form-item label="确认新密码：" prop="password_confirm" label-width="120px">
                    <el-input v-model="userInfo.password_confirm" clearable show-password placeholder="请再次输入新密码" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="passwordVisible = false">关闭</el-button>
                    <el-button type="primary" @click="editPassword">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="mobileVisible" :title="userInfo.mobile ? '更换手机号' : '修改手机号'" width="500">
            <el-form ref="formMobileRef" :rules="formMobileRules" :model="userInfo">
                <el-form-item label="手机号：" prop="mobile" label-width="120px">
                    <el-input v-model="userInfo.mobile" clearable placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="短信验证码：" prop="code" label-width="120px">
                    <el-input v-model="userInfo.code" clearable placeholder="请输入短信验证码">
                        <template #append>
                            <div class="pl-2 pr-2">
                                <SmsCode :count="60" :sendCodeApi="sendSmsCode" :apiParams="{
                                    scene: userInfo.mobile
                                        ? 'change_mobile'
                                        : 'bind_mobile',
                                    mobile: userInfo.mobile,
                                }" />
                            </div>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="passwordVisible = false">关闭</el-button>
                    <el-button type="primary" @click="editMobile">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { getUserInfo, updatePassword, updateMobile } from "@/api/user";
import { sendSmsCode } from "@/api/login";
import { isMobile } from "@/utils/validate";
import useUserStore from "@/stores/user";
import { messageSuccess } from "@/utils/message";

definePageMeta({
    auth: true,
    middleware: ["auth"],
});

const userStore = useUserStore();

const userInfo = reactive({
    password: "",
    new_password: "",
    password_confirm: "",
    mobile: "",
    code: "",
});


const passwordVisible = ref(false);

const formPasswordRef = ref(null);

const formPasswordRules = {
    password: [
        {
            required: true,
            message: "请输入原密码",
            trigger: ["change", "blur"],
        },
    ],
    new_password: [
        {
            required: true,
            message: "请输入新密码",
            trigger: ["change", "blur"],
        },
    ],
    password_confirm: [
        {
            required: true,
            message: "请再次输入新密码",
            trigger: ["change", "blur"],
        },
        {
            validator(rule: any, value: any, callback: any) {
                if (value === "") {
                    callback(new Error("请再次输入新密码"));
                } else if (value !== userInfo.new_password) {
                    callback(new Error("两次输入的新密码不一致"));
                } else {
                    callback();
                }
            },
            trigger: ["change", "blur"],
        },
    ],
};


const mobileVisible = ref(false);

const formMobileRef = ref(null);

const formMobileRules = {
    mobile: [
        { required: true, message: "请输入手机号", trigger: "blur" },
        {
            validator(rule: any, value: any, callback: any) {
                if (!isMobile(value)) {
                    callback(new Error("手机号不符合要求"));
                } else {
                    callback();
                }
            },
            trigger: ["change", "blur"],
        },
    ],
    code: [
        { required: true, message: "请输入短信验证码", trigger: "blur" },
        {
            min: 6,
            max: 6,
            message: "验证码长度应为6",
            trigger: ["change", "blur"],
        },
    ],
};

const getData = async () => {
    const data = await getUserInfo();
    for (const key in userInfo) {
        if (data[key] != null && data[key] != undefined) {
            userInfo[key] = data[key];
        }
    }
};

const editPassword = async () => {
    await formPasswordRef.value?.validate();
    await updatePassword({
        password: userInfo.password,
        new_password: userInfo.new_password,
    });
    messageSuccess("修改成功");
    passwordVisible.value = false;
    userInfo.password = "";
    userInfo.new_password = "";
    userInfo.password_confirm = "";
};

const editMobile = async () => {
    await formMobileRef.value?.validate();
    await updateMobile({ mobile: userInfo.mobile, code: userInfo.code });
    messageSuccess("修改成功");
    mobileVisible.value = false;
    getData();
    userStore.getUser();
};

getData();
</script>
<style lang="scss">
.user-info {
    .user-label {
        width: 200px;
    }

    .edit-btn {
        vertical-align: middle;
        cursor: pointer;
        color: var(--el-color-primary);
    }
}
</style>
